<template>
	<view :style="myStyle" >
		<view :style="{
                width: upWith + 'rpx',
                height: upHeight + 'rpx',
                borderRadius: upBradius + 'rpx',
              }" class="swiper1">
			<swiper :style="{
                width: upWith + 'rpx',
                height: upHeight + 'rpx',
                borderRadius: upBradius + 'rpx',
              }" circular :indicator-dots="true" :autoplay="true" indicator-color='#333333'
				indicator-active-color="#ffffff" interval="3000" duration="1000">
				<swiper-item :style="{
                width: upWith + 'rpx',
                height: upHeight + 'rpx',
                borderRadius: upBradius + 'rpx',
              }" v-for="(item,index) in swiperlist" :key="index" @click="goPage(item)">
					<image :style="{
                width: upWith + 'rpx',
                height: upHeight + 'rpx',
                borderRadius: upBradius + 'rpx',
              }" :src="item.images" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import {
		getSwiper
	} from '@/common/http.api.js';
	export default {
		props: {
			swiperid: {
				type: Number,
				default: 0
			},
			upWith: {
				type: Number,
				default: 702,
			},
			upHeight: {
				type: Number,
				default: 224,
			},
			upBradius: {
				type: Number,
				default: 16,
			},
		},
		name: "swipergo",
		data() {
			return {
				swiperlist: []
			};
		},
		computed: {
			myStyle() {
				return {
					"--upWith": this.upWith + "rpx",
					"--upHeight": this.upHeight + "rpx",
					"--upBradius": this.upBradius + "rpx",
				};
			},
		},
		created() {
			getSwiper({
				advertType: this.swiperid
			}).then(res => {
				if (res.code == 200) {
					this.swiperlist = res.rows
				}
			})
		},
		methods: {
			goPage(item) {
				uni.previewImage({
					urls: [item.images]
				})
				// if (item.jumpUrl !='') {
				// 	uni.navigateTo({
				// 		url: item.jumpUrl
				// 	})
				// }
			}
		}
	}
</script>

<style lang="less">
	.swiper1 {
		margin: 20rpx auto;
	}
</style>